<template>
  <div>
    <!-- 直接在组件中获取数据 不好维护和阅读 -->
    <h2>Count插值拿:{{ $store.state.count }}</h2>
    <h2>num插值拿:{{ $store.state.num }}</h2>

    <h2>Count计算属性拿:{{ count }}</h2>
    <h2>num计算属性拿:{{ num }}</h2>

    <button @click="incrementCount">累加count</button>
    <button @click="incrementNCount({ n: 2 })">累加count</button>
  </div>
</template>

<script>
//vuex提供了一个mapMutations的辅助函数，专门用来方便commit store中的mutations函数
import { mapState, mapMutations } from "vuex";
export default {
  name: "count",
  mounted() {
    // const result = mapMutations(["incrementCount", "incrementNCount"]);
    // console.log(result, "result");
    // result.incrementCount.call(this);
  },
  computed: {
    ...mapState(["count", "num"]),
  },
  methods: {
    //mapMutations接收一个数组作为参数，可以快速的帮我们生成 提交对应mutations的方法 组成的对象
    //我们直接子啊methods中解构出来即可
    ...mapMutations(["incrementCount", "incrementNCount"]),
  },
};
</script>

<style></style>
